<template>
  <div class="app-container">
    <div class="Main">
      <el-card class="MainCard" shadow="always" :body-style="{ padding: '0' }">
        <div class="MainCardHeader">
          <h1 class="MainCardHeaderH1">用户管理</h1>
          <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="650" />
        </div>
        <div class="MainCardBottom">
          <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">重置密码</el-button>
          <div>
            <el-button style="background-color: #e7e7e7; width: 60px; color: #000000; border: none" type="info" size="small">保存</el-button>
            <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">打印</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'UserInformation'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
// 表格数据
const tableHeader = ref([
  {
    label: '公司',
    prop: 'customer',
    width: '75p'
  },
  {
    label: '用户代码',
    prop: 'customer',
    width: '75p'
  },
  {
    label: '英文名',
    prop: 'customer',
    width: '75p'
  },
  {
    label: '中文名',
    prop: 'customer',
    width: '60px'
  },
  {
    label: '部门',
    prop: 'customer',
    width: '207px',
    type: 'select'
  },
  {
    label: '职务',
    prop: 'customer',
    width: '207px',
    type: 'select'
  },
  {
    label: '最后登陆时间',
    prop: 'customer',
    width: '158px'
  },
  {
    label: '锁定状态',
    prop: 'customer',
    width: '112px',
    type: 'select'
  },
  {
    label: '领用部门',
    prop: 'customer',
    width: '112px',
    type: 'select'
  },
  {
    label: '派工部门',
    prop: 'customer',
    width: '112px',
    type: 'select'
  },
  {
    label: '外网标记',
    prop: 'customer',
    width: '112px',
    type: 'select'
  },
  {
    label: '备注',
    prop: 'customer',
    width: '304px'
  }
])
const tableData = ref([
  {
    customer: '2023-5-5002',
    unInvested: '222222222222222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  }
])
</script>

<style lang="less" scoped>
// 主体
.Main {
  width: 100%;
  height: 800px;
}

// 卡片背景
.MainCard {
  width: 100%;
  height: 100%;
  box-shadow: none;
}

.MainCardHeaderH1 {
  font-size: 16px;
  margin-top: 20px;
}

.MainCardHeader {
  margin-left: 20px;
}

.MainCardBottom {
  width: 50%;
  margin-top: 70px;
  margin-left: 48%;
  display: flex;
  justify-content: space-between;
}
</style>
